import { Card, Descriptions, Divider, Icon, Tag } from 'antd';
import React, { useState, useEffect } from 'react';
import { stringToDate } from "@/generic/Utils";

const DescripItem = Descriptions.Item

const PromiseTags = props => {

    const { objInfo } = props;
    const { defaultIndex='', extra_method = ()=>{}, targetKey='' } = props.isMine;
    const [extraObj, setExtraObj] = useState(null);

    useEffect(() =>{
        extra_method({ id: objInfo[defaultIndex] }, true)
            .then(content => {
                const { results = [] } = content;
                if (results) {
                    const resList = [];
                    results.forEach((item, i) => {
                        resList.push(<Tag key={i} color="blue">{item[targetKey]}</Tag>);
                    })

                    setExtraObj(resList);
                }
            })
    }, [])

    return extraObj || '暂无！';
}

const Details = props => {

    const { dispatch, currentPage, objInfo } = props;
    const { detailTitle="", leave, content: contentItems={}, footer: footerArr=[], } = props.detailArgs;
    const [content, setContent] = useState("");
    const [footer, setFooter] = useState('');
    const MARK = 'detail';

    const renderContent = () => {

        const descripItems = [];

        const renderText = itemObj => {
            const { index, handle, isMine = {} } = itemObj;
            const text = objInfo[index];
            if ( isMine.extra_method ) {
                return <PromiseTags isMine={isMine} objInfo={objInfo}/>
            }
            else if (typeof (text) == 'boolean') {
                return text 
                    ? <Icon type="check-square" style={{ color: '#52c41a' }} />
                    : <Icon type="close-square" style={{ color: 'gray' }} />
            }
            else if (handle) {
                return handle(text);
            }
            return text;
        }

        if (currentPage) {
            for (const key in contentItems) {
                
                const descList = [];
                contentItems[key].length > 0
                && contentItems[key].forEach((item, i) =>{
                    const textHtml = renderText(item);
                    // console.log('==>> textHtml', textHtml)
                    descList.push(<DescripItem key={i} label={item.label}>
                        { textHtml || `暂无！`}
                    </DescripItem>);
                })

                descripItems.push(
                    <span key={key}>
                        <Descriptions>{descList}</Descriptions>
                        <Divider />
                    </span>
                )
            }
        }

        return descripItems
    }

    const renderFooter = () => {
        const footerOpts = [];

        footerArr.forEach((item, i) => {
            (!item.mark || item.mark == MARK)
                && footerOpts.push(
                    <div key={i} style={{ ...item.style }}>
                        <item.elem {...item.args}
                            onClick={() => {
                                item.onClick &&
                                    item.onClick(dispatch, objInfo)
                            }}
                        >{item.text}</item.elem>
                    </div>
                )
        })
        return <>{footerOpts}</>;
    }

    useEffect(() =>{
        return () => {
            // leave && dispatch({ ...leave })
        }
    }, [])

    useEffect(() => { 
        // console.log("==>> contentItems!", contentItems)
        setContent(renderContent());
        setFooter(renderFooter());
    }, [contentItems])

    return (
        <div style={{ backgroundColor: "#fff" }}>
            <Card
                title={detailTitle}
                // extra={extraRender()}
            >
                {content}
                {footer}
            </Card>
        </div>
    );
}

export default Details;